<template>
  <a-form
    ref="formRef"
    :model="formData"
    class="form"
    :label-col-props="{ span: 6 }"
    :wrapper-col-props="{ span: 18 }"
  >
    <!-- 动态生成表单项 -->
    <a-form-item
      v-for="(fieldName, fieldKey) in fieldMapping"
      :key="fieldKey"
      :label="fieldKey"
    >
      <!-- 这里使用 fieldKey 作为 label -->
      <a-select
        v-model="formData[fieldKey]"
        :style="{ width: '320px' }"
        placeholder="Please select ..."
      >
        <a-option v-for="option in excelHeaders" :key="option" :value="option">
          {{ option }}
        </a-option>
      </a-select>
    </a-form-item>

    <a-form-item>
      <a-space>
        <a-button type="secondary" @click="goPrev">
          {{ $t('stepForm.button.prev') }}
        </a-button>
        <a-button type="primary" @click="onNextClick">
          {{ $t('stepForm.button.next') }}
        </a-button>
      </a-space>
    </a-form-item>
  </a-form>

  <div class="details-wrapper">
    <a-typography-title :heading="1" style="margin-top: 0">
      {{ $t('提示') }}
    </a-typography-title>
    <a-typography-paragraph style="margin-bottom: 0">
      {{ $t('请检查确认字段映射是否正确') }}
    </a-typography-paragraph>
  </div>
  <p>File ID: {{ props.modelData1 }}</p>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
  import { getMappings } from '@/api/form'; // 确保路径正确

  const formRef = ref();
  const formData = ref({});
  const fieldMapping = ref({});
  const fileType = ref({});
  const excelHeaders = ref([]); // 新增 excelHeaders 字段
  const fileID = ref(); // 假设这里将根据 fieldMapping 动态设置
  const emits = defineEmits(['changeStep']);

  const props = defineProps({
    modelData1: Number,
  });

  // 获取字段映射
  const fetchFieldMapping = async () => {
    console.log('props console');
    console.log(props);
    const data = { file_id: props.modelData1 }; // 创建符合接口定义的数据对象
    fileID.value = data;
    const response = await getMappings(data); // 传递对象

    console.log('response_new');
    console.log(response);

    fieldMapping.value = response.field_mapping;
    fileType.value = response.file_type;
    excelHeaders.value = response.excel_headers; // 设置 excelHeaders

    // 初始化 formData
    Object.keys(fieldMapping.value).forEach((key) => {
      formData.value[key] = fieldMapping.value[key];
    });
  };

  onMounted(fetchFieldMapping);

  const onNextClick = async () => {
    try {
      console.log(formRef.value?.validate());
      const res = await formRef.value?.validate();
      console.log('Form data3:', fileID.value.file_id);

      // 数据准备发送
      const postData = {
        file_id: fileID.value.file_id, // 假设formData.value有file_id字段
        data: {
          file_type: fileType.value, // 假设formData.value有file_type字段
          field_mapping: fieldMapping.value, // 假设formData.value有field_mapping字段
        },
      };

      console.log(postData);
      const response = await axios.post(
        'http://101.35.43.81:8111/api/submit-mappings',
        postData
      );
      emits('changeStep', 'submit', { ...formRef.value });

      console.log('Submit response:', response.data);
      // }
    } catch (error) {
      console.error('Validation error:', error);
    }
  };

  const goPrev = () => {
    // Handle going back
  };
</script>

<style scoped>
  /* Your styles here */
</style>

<style scoped lang="less">
  .container {
    .keep-margin {
      margin-bottom: 20px;
    }
  }

  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 0;
    background-color: var(--color-bg-2);
  }

  .steps {
    margin-bottom: 36px;
  }

  .form {
    width: 1200px;
  }

  .form-content {
    padding: 8px 50px 0 30px;
  }

  .details-wrapper {
    width: 895px;
    margin-top: 54px;
    padding: 20px;
    text-align: left;
    background-color: var(--color-fill-2);
  }
</style>
